<template>
  <div class="clothing-accessory-container">
    <div class="page-header">
      <h2>服装配饰</h2>
      <p>选择精美的配饰，为您的定制服装增添个性与品味</p>
      
      <div class="filter-container">
        <el-input
          v-model="searchQuery"
          placeholder="搜索配饰名称"
          clearable
          class="filter-item"
          @clear="handleFilter"
          @input="handleFilter"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <el-select v-model="categoryFilter" placeholder="选择类别" clearable class="filter-item" @change="handleFilter">
          <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        
        <el-select v-model="styleFilter" placeholder="选择风格" clearable class="filter-item" @change="handleFilter">
          <el-option v-for="item in styleOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
    
    <el-row :gutter="24" class="accessory-grid">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="accessory in filteredAccessories" :key="accessory.id" class="accessory-item-col">
        <el-card class="accessory-card" :body-style="{ padding: '0px' }" shadow="hover">
          <div class="accessory-image-container" @click="viewAccessoryDetail(accessory)">
            <el-image :src="accessory.imageUrl" fit="cover" class="accessory-image" />
            <div class="accessory-overlay">
              <el-button type="primary" size="small" round>查看详情</el-button>
            </div>
          </div>
          <div class="accessory-info">
            <div class="accessory-name">{{ accessory.name }}</div>
            <div class="accessory-category">{{ accessory.category }}</div>
            <div class="accessory-price">¥{{ accessory.price }}</div>
            <div class="accessory-tags">
              <el-tag size="small" type="success" v-if="accessory.isNew">新品</el-tag>
              <el-tag size="small" type="warning" v-if="accessory.isHot">热门</el-tag>
              <el-tag size="small" type="danger" v-if="accessory.isLimited">限量</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-empty v-if="filteredAccessories.length === 0" description="暂无匹配的配饰" />
    
    <!-- 配饰详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="配饰详情"
      width="700px"
      destroy-on-close
    >
      <div class="accessory-detail" v-if="currentAccessory">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="accessory-detail-images">
              <el-image :src="currentAccessory.imageUrl" fit="cover" class="main-image" />
              <div class="thumbnail-list" v-if="currentAccessory.extraImages && currentAccessory.extraImages.length">
                <div v-for="(image, index) in currentAccessory.extraImages" :key="index" class="thumbnail-item">
                  <el-image :src="image" fit="cover" class="thumbnail-image" />
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="accessory-detail-info">
              <h3 class="accessory-detail-name">{{ currentAccessory.name }}</h3>
              <el-divider />
              <div class="accessory-detail-item">
                <span class="label">类别:</span>
                <span class="value">{{ currentAccessory.category }}</span>
              </div>
              <div class="accessory-detail-item">
                <span class="label">价格:</span>
                <span class="value price">¥{{ currentAccessory.price }}</span>
              </div>
              <div class="accessory-detail-item">
                <span class="label">材质:</span>
                <span class="value">{{ currentAccessory.material }}</span>
              </div>
              <div class="accessory-detail-item">
                <span class="label">风格:</span>
                <span class="value">{{ currentAccessory.style }}</span>
              </div>
              <div class="accessory-detail-item">
                <span class="label">适用场合:</span>
                <span class="value">{{ currentAccessory.occasion }}</span>
              </div>
              <div class="accessory-detail-item" v-if="currentAccessory.dimensions">
                <span class="label">尺寸:</span>
                <span class="value">{{ currentAccessory.dimensions }}</span>
              </div>
              <el-divider />
              <div class="accessory-detail-desc">
                <h4>配饰描述</h4>
                <p>{{ currentAccessory.description }}</p>
              </div>
              <div class="accessory-detail-features" v-if="currentAccessory.features && currentAccessory.features.length">
                <h4>特点</h4>
                <ul>
                  <li v-for="(feature, index) in currentAccessory.features" :key="index">{{ feature }}</li>
                </ul>
              </div>
              <div class="accessory-detail-match">
                <h4>搭配建议</h4>
                <p>{{ currentAccessory.matchSuggestion }}</p>
              </div>
              <div class="accessory-detail-actions">
                <el-button type="primary" @click="addToCustomization">添加到定制</el-button>
                <el-button type="success" @click="addToFavorites">收藏配饰</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'ClothingAccessory',
  components: {
    Search
  },
  setup() {
    const router = useRouter()
    
    // 筛选条件
    const searchQuery = ref('')
    const categoryFilter = ref('')
    const styleFilter = ref('')
    
    // 类别选项
    const categoryOptions = [
      { value: '纽扣', label: '纽扣' },
      { value: '拉链', label: '拉链' },
      { value: '徽章', label: '徽章' },
      { value: '胸针', label: '胸针' },
      { value: '领带', label: '领带' },
      { value: '领结', label: '领结' },
      { value: '腰带', label: '腰带' },
      { value: '口袋巾', label: '口袋巾' }
    ]
    
    // 风格选项
    const styleOptions = [
      { value: '商务', label: '商务' },
      { value: '休闲', label: '休闲' },
      { value: '时尚', label: '时尚' },
      { value: '复古', label: '复古' },
      { value: '简约', label: '简约' },
      { value: '奢华', label: '奢华' }
    ]
    
    // 配饰数据
    const accessoryList = ref([
      {
        id: 1,
        name: '高级珍珠纽扣',
        category: '纽扣',
        price: 68,
        material: '贝壳珍珠',
        style: '奢华',
        occasion: '正装、晚礼服',
        dimensions: '直径15mm',
        description: '精选贝壳珍珠制作的高级纽扣，光泽细腻，质感优雅，适合高端定制服装。每颗纽扣都经过严格挑选，纹理自然美观。',
        imageUrl: 'https://via.placeholder.com/400x400?text=珍珠纽扣',
        extraImages: [
          'https://via.placeholder.com/100x100?text=珍珠纽扣1',
          'https://via.placeholder.com/100x100?text=珍珠纽扣2'
        ],
        features: ['天然贝壳材质', '光泽优雅', '手工打磨', '经久耐用'],
        matchSuggestion: '适合搭配丝绸材质衬衫、真丝连衣裙或高级西装，提升服装的高贵气质。',
        isNew: true,
        isHot: true,
        isLimited: false
      },
      {
        id: 2,
        name: '纯铜复古拉链',
        category: '拉链',
        price: 45,
        material: '纯铜',
        style: '复古',
        occasion: '外套、夹克',
        dimensions: '长度25cm',
        description: '采用优质纯铜材质制作，复古做旧处理，手感厚重，经久耐用。每一个细节都展现出精湛的工艺和独特的风格。',
        imageUrl: 'https://via.placeholder.com/400x400?text=铜拉链',
        extraImages: [
          'https://via.placeholder.com/100x100?text=铜拉链1',
          'https://via.placeholder.com/100x100?text=铜拉链2'
        ],
        features: ['纯铜材质', '复古做旧', '顺滑耐用', '独特质感'],
        matchSuggestion: '适合搭配皮革外套、牛仔夹克或工装风格服饰，增添复古韵味。',
        isNew: false,
        isHot: true,
        isLimited: false
      },
      {
        id: 3,
        name: '定制刺绣胸针',
        category: '胸针',
        price: 120,
        material: '丝线、合金',
        style: '时尚',
        occasion: '西装、外套',
        dimensions: '4cm x 4cm',
        description: '手工刺绣胸针，可根据个人喜好定制图案和颜色。精细的刺绣工艺，鲜艳的色彩，为正装增添个性化的亮点。',
        imageUrl: 'https://via.placeholder.com/400x400?text=刺绣胸针',
        extraImages: [
          'https://via.placeholder.com/100x100?text=刺绣胸针1',
          'https://via.placeholder.com/100x100?text=刺绣胸针2'
        ],
        features: ['手工刺绣', '定制图案', '色彩鲜艳', '安全扣针'],
        matchSuggestion: '适合搭配西装领口或外套翻领，点缀单调的正装，展现个人风格。',
        isNew: true,
        isHot: false,
        isLimited: true
      },
      {
        id: 4,
        name: '纯色真丝领带',
        category: '领带',
        price: 180,
        material: '100%桑蚕丝',
        style: '商务',
        occasion: '商务正装、正式场合',
        dimensions: '宽8cm，长150cm',
        description: '采用上等桑蚕丝制作，手感滑顺，质地柔软，色泽均匀持久。经典宽度设计，适合各种正式场合佩戴。',
        imageUrl: 'https://via.placeholder.com/400x400?text=真丝领带',
        extraImages: [
          'https://via.placeholder.com/100x100?text=真丝领带1',
          'https://via.placeholder.com/100x100?text=真丝领带2'
        ],
        features: ['100%桑蚕丝', '手工缝制', '色泽持久', '易打理'],
        matchSuggestion: '适合搭配商务衬衫和西装，营造专业稳重的形象，是商务场合的必备单品。',
        isNew: false,
        isHot: true,
        isLimited: false
      },
      {
        id: 5,
        name: '鹿皮绒腰带',
        category: '腰带',
        price: 220,
        material: '鹿皮绒、合金扣',
        style: '休闲',
        occasion: '日常休闲、商务休闲',
        dimensions: '宽3.8cm，长105-125cm可调',
        description: '选用优质鹿皮绒面料，触感柔软，质地轻盈。搭配精致合金扣，简约大方，适合多种场合使用。',
        imageUrl: 'https://via.placeholder.com/400x400?text=鹿皮腰带',
        extraImages: [
          'https://via.placeholder.com/100x100?text=鹿皮腰带1',
          'https://via.placeholder.com/100x100?text=鹿皮腰带2'
        ],
        features: ['鹿皮绒材质', '精致合金扣', '长度可调', '耐磨耐用'],
        matchSuggestion: '适合搭配休闲裤、牛仔裤或西裤，既能展现休闲风格，又不失正式感。',
        isNew: true,
        isHot: false,
        isLimited: false
      },
      {
        id: 6,
        name: '格纹口袋巾',
        category: '口袋巾',
        price: 85,
        material: '棉麻混纺',
        style: '简约',
        occasion: '商务、宴会',
        dimensions: '23cm x 23cm',
        description: '经典格纹设计，采用高品质棉麻混纺面料，质感自然，边缘手工缝制，彰显细节品质。可作为西装口袋装饰，提升整体形象。',
        imageUrl: 'https://via.placeholder.com/400x400?text=口袋巾',
        extraImages: [
          'https://via.placeholder.com/100x100?text=口袋巾1',
          'https://via.placeholder.com/100x100?text=口袋巾2'
        ],
        features: ['经典格纹', '手工缝边', '易于打理', '多种折法'],
        matchSuggestion: '适合搭配各种西装胸前口袋，既可以选择与领带呼应的颜色，也可以作为亮色点缀。',
        isNew: false,
        isHot: true,
        isLimited: false
      }
    ])
    
    // 筛选后的数据
    const filteredAccessories = computed(() => {
      let result = accessoryList.value
      
      if (searchQuery.value) {
        result = result.filter(item => 
          item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
          item.description.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
      }
      
      if (categoryFilter.value) {
        result = result.filter(item => item.category === categoryFilter.value)
      }
      
      if (styleFilter.value) {
        result = result.filter(item => item.style === styleFilter.value)
      }
      
      return result
    })
    
    // 筛选处理
    const handleFilter = () => {
      // 如果需要调用API，这里可以添加API调用逻辑
    }
    
    // 配饰详情
    const dialogVisible = ref(false)
    const currentAccessory = ref(null)
    
    const viewAccessoryDetail = (accessory) => {
      currentAccessory.value = accessory
      dialogVisible.value = true
    }
    
    // 添加到定制
    const addToCustomization = () => {
      router.push({
        path: '/custom/submit',
        query: { accessoryId: currentAccessory.value.id }
      })
      dialogVisible.value = false
      ElMessage.success('已添加配饰到定制，请继续完成定制')
    }
    
    // 收藏配饰
    const addToFavorites = () => {
      ElMessage.success('配饰收藏成功')
      dialogVisible.value = false
    }
    
    // 初始化
    onMounted(() => {
      // 可以在这里调用API获取配饰数据
    })
    
    return {
      searchQuery,
      categoryFilter,
      styleFilter,
      categoryOptions,
      styleOptions,
      accessoryList,
      filteredAccessories,
      handleFilter,
      dialogVisible,
      currentAccessory,
      viewAccessoryDetail,
      addToCustomization,
      addToFavorites
    }
  }
}
</script>

<style scoped>
.clothing-accessory-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 500;
}

.page-header p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
}

.filter-container {
  display: flex;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-item {
  width: 200px;
}

.accessory-grid {
  margin-bottom: 24px;
}

.accessory-item-col {
  margin-bottom: 20px;
}

.accessory-card {
  transition: all 0.3s;
  height: 100%;
}

.accessory-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.accessory-image-container {
  position: relative;
  overflow: hidden;
}

.accessory-image {
  width: 100%;
  height: 240px;
  display: block;
  transition: transform 0.5s;
}

.accessory-image-container:hover .accessory-image {
  transform: scale(1.05);
}

.accessory-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.accessory-image-container:hover .accessory-overlay {
  opacity: 1;
}

.accessory-info {
  padding: 14px;
}

.accessory-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}

.accessory-category {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
}

.accessory-price {
  font-size: 14px;
  font-weight: 500;
  color: #f56c6c;
  margin-bottom: 8px;
}

.accessory-tags {
  display: flex;
  gap: 6px;
}

/* 配饰详情 */
.accessory-detail-images {
  margin-bottom: 20px;
}

.main-image {
  width: 100%;
  height: 280px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.thumbnail-list {
  display: flex;
  gap: 8px;
}

.thumbnail-item {
  width: 70px;
  height: 70px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

.thumbnail-item:hover .thumbnail-image {
  transform: scale(1.1);
}

.accessory-detail-name {
  font-size: 20px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 16px;
}

.accessory-detail-item {
  margin-bottom: 10px;
  display: flex;
}

.accessory-detail-item .label {
  font-weight: 500;
  width: 80px;
  color: #666;
}

.accessory-detail-item .price {
  color: #f56c6c;
  font-weight: 500;
}

.accessory-detail-desc,
.accessory-detail-features,
.accessory-detail-match {
  margin-bottom: 16px;
}

.accessory-detail-desc h4,
.accessory-detail-features h4,
.accessory-detail-match h4 {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 8px;
}

.accessory-detail-desc p,
.accessory-detail-match p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.accessory-detail-features ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
}

.accessory-detail-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style> 